import React,{ Component } from 'react';
import './heat.scss';
import HeatList from './heatList/heatList.jsx';
import { DatePicker, message } from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import { cardHot } from 'api/radar.js';
export default class Heat extends Component{
	constructor (props) {
		super(props)
		this.state={
			heatList: [],
			startValue: null,
	    endValue: null,
	    endOpen: false,
	    start_time: '2015-01-02',
	    end_time: '2015-02-02',
	    start_Value: '',
	    end_Value: ''
		}
	}
	disabledStartDate = (startValue) => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }

  disabledEndDate = (endValue) => {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  }
  onStartChange = (time, data) => {
  	console.log(time, data)
  	this.setState({
      startValue: time,
      start_Value: data,
      endOpen: true
    }, () => {
    	this._cardHot()
    })
   // console.log(typeof(value._i))
  }

  onEndChange = (time, data) => {
  	this.setState({
      endValue: time,
      end_Value: data,
      endOpen: false
    }, () => {
    	this._cardHot()
    })
  }

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
  }
	_cardHot () { //热度接口
		// console.log(this.state.start_Value,this.state.end_Value)
		cardHot({
			start_time: this.state.start_Value === '' ? this.state.start_time : this.state.start_Value,
			end_time: this.state.end_Value === '' ? this.state.end_time : this.state.end_Value,
			page: 1
		}).then(res => {
			if (res.code === 1) {
				this.setState({
					heatList: res.data.data
				})
			} else{
				message.error(res.message,3)
			}
		})
	}
	getLocationTime () { //获取当前时间和前一周时间
		let nowdate = new Date();//当时时间
		let oneweekdate = new Date(nowdate-7*24*3600*1000);//前一周时间
		let sign1 = "-";
		let year = nowdate.getFullYear() // 年
		let month = nowdate.getMonth() + 1; // 月
	  let day  = nowdate.getDate(); // 日
	  let y = oneweekdate.getFullYear(); // 年
    let m = oneweekdate.getMonth() + 1; // 月
    let d = oneweekdate.getDate(); // 日
	  if (month >= 1 && month <= 9) {
		  month = "0" + month;
		}
		if (day >= 0 && day <= 9) {
		  day = "0" + day;
		}
		if (m >= 1 && m <= 9) {
		  m = "0" + m;
		}
		if (d >= 0 && d <= 9) {
		  d = "0" + d;
		}
		this.setState({
		 	start_time: y + sign1 + m + sign1 + d,
			end_time: year + sign1 + month + sign1 + day
		}, () => {
			this._cardHot(),
			this.setState({
				start_time: this.state.start_time,
				end_time: this.state.end_time
			})
		})
	}
	componentWillMount(){
		this.getLocationTime();
	}
	render(){
		const { startValue, endValue, endOpen, startOpen } = this.state;
		const dateFormat = 'YYYY-MM-DD';
		return(
			<div className="heat">
				<div className="heat_time">
					<span>
						<DatePicker
		          disabledDate={this.disabledStartDate}
		          showTime
		          format={dateFormat}
		          value={startValue}
		          onChange={this.onStartChange}
		          onOpenChange={this.handleStartOpenChange}
		          className="heat_time_input"
		          defaultValue={moment(this.state.start_time, dateFormat)}
		        />
		      </span>
					至
					<span>
						<DatePicker
		          disabledDate={this.disabledEndDate}
		          showTime
		          format={dateFormat}
		          value={endValue}
		          onChange={this.onEndChange}
		          open={endOpen}
		          onOpenChange={this.handleEndOpenChange}
		          className="heat_time_input"
		          defaultValue={moment(this.state.end_time, dateFormat)}
		        />
		      </span>
				</div>
				<div className="heat_list">
				{
					this.state.heatList.map((item,index) => {
						return(
							<HeatList heatList={{...item}} onClick={this.pushHistory} key={index}/>
						)
					})
				}
				</div>
			</div>
		)
	}
}